@import 'assets/styles/realize/lin-variables.scss';

.lin-search-container {
  height: 36px;
}

.lin-search.ant-input-search.ant-input-search-enter-button.ant-input-group-wrapper {
  .ant-input-wrapper.ant-input-group {
    width: 150px;
    .ant-input-search.lin-search.ant-input-search-enter-button.ant-input-affix-wrapper {
      &.ant-input-affix-wrapper {
        width: 150px;
        height: 36px;
        padding: 0 0px 0 16px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-right: 0;
        // transform: translateX(1px);
        transition: all 0.2s linear;
      }
      
      &.ant-input-affix-wrapper-focused {
        width: 250px;
        border: 1px solid $theme;
        box-shadow: none;
        border-right: 0;
        transition: all 0.3s linear;
      }
    }
    
    .ant-input-suffix {
      .anticon.anticon-close-circle.ant-input-clear-icon {
        font-size: 14px;
        height: 36px;
        line-height: 36px;
        color: #ccc;
        opacity: 0;
        transform: translate(-5px, 1px);
        transition: all 0.2s linear;
        &:hover {
          color: #aaa;
          transition: all 0.2s linear;
        }
      }
    }

    &:hover {
      .ant-input-suffix {
        .anticon.anticon-close-circle.ant-input-clear-icon {
          opacity: 1;
          transition: all 0.2s linear;
        }
      }
    }
  }

  .ant-input-group-addon {
    background: transparent;
    .ant-btn.ant-input-search-button {
      height: 36px;
      font-size: 20px;
      background: $theme;
      padding: 0 5px;
      border: 0;
      outline: 0;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
    }
  }
}
